import React, {Component} from 'react'
import {Table, Breadcrumb} from 'tinper-bee'
import {
    getCircleReportList,
    getColumnReportList
} from './queryreport.config'
import './index.less';
import App from "../../layout/App";
import {
    vendorsDanger,
    vendorsFmtDate,
} from 'utils/config.js';

export default class QueryReport extends Component {
    constructor(props) {
        super(props);
        let _me = this;
        this.state = {
            reportTableData: [],
            columns: [
                {
                    title: "序号", dataIndex: "num", key: "num", width: '4%'
                },
                {title: "项目名称", dataIndex: "projectName", key: "projectName", width: '14%'},
                {title: "施工单位", dataIndex: "enterpriseName", key: "enterpriseName", width: '16%'},
                {title: "工序", dataIndex: "procedureName", key: "procedureName", width: '16%'},
                {title: "问题原因", dataIndex: "problemReasonName", key: "problemReasonName", width: '20%'},
                {
                    title: "问题状态", dataIndex: "problemStatus", key: "problemStatus", width: '7%',
                    render(text, record, index) {
                        if (text == 0) {
                            text = '待整改'
                        } else if (text == 1) {
                            text = '待验收'
                        } else if (text == 2) {
                            text = '已关闭'
                        }
                        return (<span>{text}</span>)
                    }
                },
                {
                    title: "完成期限", dataIndex: "endDate", key: "endDate", width: '7%',
                    render(text, record, index) {
                        text = vendorsFmtDate(text);
                        return (<span>{text}</span>)
                    }
                },
                {
                    title: "是否超期", dataIndex: "overdue", key: "overdue", width: '7%',
                    render(text, record, index) {
                        if (text == 0) {
                            text = '未超期'
                        } else if (text == 1) {
                            text = '已超期'
                        }
                        return (<span>{text}</span>)
                    }
                },
                {title: "整改人", dataIndex: "rectificationerName", key: "rectificationerName", width: '9%'},
            ]
        }
    }

    componentDidMount() {
        let params = JSON.parse(sessionStorage.getItem("statisticsparams"));
        if (params.statistics) {
            this.requestMethod(getColumnReportList, params)
        } else {
            this.requestMethod(getCircleReportList, params)
        }
    }

    addNumber = (arr) => {
        let num = 0;
        if (arr && arr.length) {
            for (let i = 0; i < arr.length; i++) {
                let item = arr[i];
                num += 1;
                item.num = num
            }
        }
    };
    requestMethod = (requestCallback, params) => {
        requestCallback({...params, 'isAjax': 1, ieStamp: new Date().getTime()}).then((res) => {
            if (res.data.resultCode === 'ok') {
                let data = res.data.result;
                if (data) {
                    this.addNumber(data);
                    this.setState({
                        reportTableData: data
                    })
                }
            } else {
                vendorsDanger({'text': res.data.exMsg});
            }
        })
    };

    componentWillUnmount() {
        sessionStorage.removeItem("statisticsparams");
    };

    setKey = (item) => {
        return item.num
    };

    render() {
        return (
            <App>
                <div className='box'>
                    <div className="boxTop">
                        <Breadcrumb>
                            <Breadcrumb.Item href="./groupquery.html?page_state=1">
                                集团查看
                            </Breadcrumb.Item>
                            <Breadcrumb.Item href="./dataanalysis.html?page_state=1">
                                企业看板
                            </Breadcrumb.Item>
                            <Breadcrumb.Item active>
                                问题目录单查询
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <div className='boxBottom'>
                        <div className='boxBottom-title'>问题目录单查询</div>
                        <div className='boxBottom-content'>
                            <Table
                                columns={this.state.columns}
                                data={this.state.reportTableData}
                                scroll={{y: 460}}
                                bordered
                                emptyText={() => '暂无数据'}
                                rowKey={this.setKey}
                            />
                        </div>
                    </div>
                </div>
            </App>
        )
    }
}
